<template>
  <div class="own-patient">
    <el-alert
      title="请先查询管辖病人信息，再进行修改电子病历"
      type="info"
      center
      show-icon
    />
    <el-card class="own-card">
      <!-- 步骤条区域 -->
      <!-- 哦吼，这里好奇怪，需要减'0' -->
      <el-steps
        :active="activeIndex - '0'"
        finish-status="success"
        align-center
        class="pat-step"
      >
        <el-step title="查询基本信息" />
        <el-step title="修改电子病历" />
        <el-step title="检查病历完成" />
      </el-steps>

      <!-- tab栏区域 -->
      <el-tabs
        v-model="activeIndex"
        tab-position="left"
        type="border-card"
        class="pat-tab"
        stretch
      >
        <el-tab-pane label="查询基本信息" name="0">
          <div class="search-header">
            <el-button icon="el-icon-search" circle @click="handleSearch" />
          </div>
          <transition-group
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__zoomIn"
            leave-active-class="animate__zoomOut"
          ><div v-if="form.patAdd" v-show="activeIndex==='0'" key="1" class="search-body">
            <el-descriptions title="患者信息" :column="2" border>
              <el-descriptions-item
                label="患者区块"
                label-class-name="my-label"
                content-class-name="my-content"
                :content-style="{ 'text-align': 'center' }"
                :span="2"
              >{{ form.patAdd }}</el-descriptions-item>
              <el-descriptions-item
                label="症状"
              >{{ form.symptoms }}</el-descriptions-item>
              <el-descriptions-item label="体温(℃)">
                <el-tag size="small" type="danger">{{ form.temperature }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="推荐药物">{{ form.medical }}</el-descriptions-item>
              <el-descriptions-item
                label="建议"
              >{{ form.advice }}</el-descriptions-item>
              <el-descriptions-item
                label="送往医院"
              >{{ form.hospital }}</el-descriptions-item>
            </el-descriptions>
          </div>
          </transition-group>
        </el-tab-pane>

        <el-tab-pane label="修改电子病历" name="1">
          <el-form :model="form" status-icon label-width="100px">
            <el-form-item label="患者区块" prop="patAdd">
              <el-input v-model="form.patAdd" />
            </el-form-item>
            <el-divider />
            <el-form-item label="药品" prop="medical">
              <el-input v-model="form.medical" />
            </el-form-item>
            <el-form-item label="体温(℃)" prop="temperature">
              <el-input v-model="form.temperature" />
            </el-form-item>
            <el-form-item label="转交医院" prop="hospital">
              <el-input v-model="form.hospital" />
            </el-form-item>
            <el-form-item label="症状" prop="symptoms">
              <el-input
                v-model="form.symptoms"
                type="textarea"
                autosize
                placeholder="请输入二次症状"
              />
            </el-form-item>
            <el-form-item label="建议" prop="symptoms">
              <el-input
                v-model="form.advice"
                type="textarea"
                autosize
                placeholder="请输入建议"
              />
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="操作返回结果" name="2">
          <el-descriptions title="返回区块结果" :column="1">
            <el-descriptions-item label="区块号">
              <el-tag v-if="returnInfo.blockNumber !== ''" type="success">{{ returnInfo.blockNumber }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="区块哈希"><el-tag v-if="returnInfo.blockHash !== ''" type="success">{{ returnInfo.blockHash }}</el-tag></el-descriptions-item>
            <el-descriptions-item label="交易哈希"><el-tag v-if="returnInfo.transactionHash !== ''" type="success">{{ returnInfo.transactionHash }}</el-tag></el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
      <div class="operation">
        <el-button
          v-if="activeIndex > 0"
          style="margin-top: 12px"
          @click="pre"
        >上一步</el-button>
        <el-button
          v-if="activeIndex < 3"
          style="margin-top: 12px"
          @click="next"
        >下一步</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInfo, editInfo } from '@/api/patient'
export default {
  data() {
    return {
      activeIndex: '0',
      form: {
        docAdd: 'EA156A2C16EB8F24FE98EC6A36B3CB23229DFDB192C100F49828704FED25E43E',
        patAdd: '',
        medical: '',
        advice: '',
        symptoms: '',
        temperature: '',
        hospital: ''
      },
      returnInfo: {
        blockHash: '',
        transactionHash: '',
        blockNumber: ''
      }
    }
  },
  methods: {
    pre() {
      this.activeIndex = String(Number(this.activeIndex) - 1)
    },
    next() {
      this.activeIndex = String(Number(this.activeIndex) + 1)
    },
    async handleSearch() {
      const res = await getInfo({
        docAdd: 'EA156A2C16EB8F24FE98EC6A36B3CB23229DFDB192C100F49828704FED25E43E'
      })
      if (res.code === '200') {
        this.$notify({
          type: 'success',
          message: '获取病人信息成功'
        })
        this.form.patAdd = res.data[0]
        this.form.medical = res.data[1]
        this.form.advice = res.data[2]
        this.form.symptoms = res.data[3]
        this.form.temperature = res.data[4]
        this.form.hospital = res.data[5]
      } else {
        this.$notify({
          type: 'error',
          message: '获取病人信息失败'
        })
      }
    },
    async submitForm() {
      const res = await editInfo(this.form)
      if (res.code === '200') {
        this.form = {}
        this.returnInfo.blockNumber = res.data.blockNumber
        this.returnInfo.blockHash = res.data.blockHash
        this.returnInfo.transactionHash = res.data.transactionHash
        this.$notify({
          type: 'success',
          message: '修改电子病历成功'
        })
        this.activeIndex = '2'
      } else {
        this.$notify({
          type: 'error',
          message: '修改失败，请检查病人区块是否输入正确'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/el-btn';
@include my-el-button;
// @include my-el-input;
.own-patient {
  padding: 10px 10px 0;

  .own-card {
    margin-top: 10px;
    height: 600px;
  }

  .pat-tab {
    margin-top: 20px;
    height: 450px;
    .search-header {
      text-align: right;
    }
    ::v-deep .search-body {
      .my-label {
        background-color: #409EFF;
        color: #fff;
      }

      .my-content {
        background-color: #67C23A;
        color: #fff;
      }
    }
  }
  .operation {
    text-align: right;
  }
}
</style>
